<template>
	<view class="acceptanceDetail">
		<view class="card">
			<image class="head-img" src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/acceptance-head.png" mode=""></image>
			<view class="head-title">{{ detailData.craftName }}</view>
			<view class="title">
				<view class="tag">{{ detailData.procedureName }}
					<wd-tag :color="acceptanceStatusObj[query.status]?.color" :bg-color="acceptanceStatusObj[query.status]?.bg">
						{{ acceptanceStatusObj[query.status]?.text }}
					</wd-tag>
				</view>
				<view class="link" @click="toStandard">验收标准</view>
			</view>
		</view>
		<view class="white-desc">
			<view class="desc-title">验收描述</view>
			<view class="text">{{ detailData.checkDesc }}</view>
		</view>
		<view class="white-desc">   
			<view class="desc-title">验收图片凭据</view>
			<view class="img-list">
				<image @click="previewImage(splitStrToArray(detailData.picUrls),index)" v-for="img,index in splitStrToArray(detailData.picUrls)" :src="img"></image>
			</view>
			<Empty v-if="!splitStrToArray(detailData.picUrls).length"/>
		</view>
		<view class="white-desc">
			<view class="desc-title">验收视频凭据</view>
			<view class="img-list">
				<video id="myVideo" v-for="video in splitStrToArray(detailData?.videoUrls)" :src="video" :danmu-list="danmuList"
					enable-danmu danmu-btn controls></video>
			</view>
			<Empty v-if="!splitStrToArray(detailData?.videoUrls).length"/>
		</view>
		<view class="btn" v-if="!refuse">
			<view class="refuse" @click="refuse = true">拒绝</view>
			<view class="pass" @click="pass">通过</view>
		</view>
		<wd-action-sheet v-model="refuse" title="拒绝理由" @close="close">
			<view class="textarea-box">
				<textarea v-model="query.customerRemarks" auto-focus :maxlength="200" placeholder="请输入拒绝理由" />
				<view class="count">{{ query.customerRemarks ? query.customerRemarks.length : 0 }}/200</view>
			</view>
			<view class="comfirm" @click="audit(2)">完成</view>
		</wd-action-sheet>
		<wd-message-box></wd-message-box>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from '@dcloudio/uni-app'
import { getDetail, setConfirm } from "@/api/acceptance";
import { useMessage } from '@/uni_modules/wot-design-uni';
import { previewImage,splitStrToArray } from "@/utils/utils";
import Empty from "@/components/empty/index.vue";
import {acceptanceStatusObj} from "../acceptanceCofig";
const message = useMessage()
const query = ref({});
const detailData = ref({})
/**
 * 去验收标准
 */
const toStandard=()=>{
	uni.navigateTo({
		url: '/pages/acceptanceManage/standard/standard?checkId='+query.value.checkId
	})
}
/**
 * 点击通过按钮
 */
const pass = () => {
	message
		.confirm({
			title: '确认通过该工序验收？'
		})
		.then(() => {
			audit(1)
		})
}
/**
 * 是否现实底部按钮
 */
const refuse = ref(false);
/**
 * 初始化
 */
const getDetailData = async () => {
	try {
		const res = await getDetail(query.value);
		detailData.value = res.data;
	} catch (error) {
		console.log(error)
	}
}
/**
 * 拒绝or通过
 */
const audit = async (checkState) => {
	try {
		await setConfirm({ ...query.value, customerCheckState:checkState });
		uni.navigateBack();
	} catch (error) {
		console.log(error);
	}
}
onLoad((e) => {
	query.value = e;
})
onMounted(() => {
	getDetailData()
})
</script>

<style lang="scss" scoped>
@import "detail.scss"
</style>
